<template>
  <div class="header_top">
    <v-head />
    <!-- 内页banner -->
    <v-ban />
    <!-- 二级 -->
    <!-- :to="{ path: '/hotteamlist/' + item.id } -->
    <div class="ny_erji">
      <div class="container">
        <el-menu
          :default-active="activeIndex2"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#f7f8fa"
          active-text-color="#19a15f"
        >
          <el-menu-item
            v-for="item in this.erjiList"
            :key="item.id"
            @click="getAllList(item.id)"
            :index="String(item.id)"
            >{{ item.name }}</el-menu-item
          >
        </el-menu>
      </div>
    </div>
    <!-- 列表 -->
    <div class="list_team p7090">
      <div class="container">
        <div class="shaixuan">
          <ul class="clearfix">
            <li>
              <a
                href="javascript:;"
                @click="timeClick"
                :class="{ active: isActive === 1 }"
                >最新发布</a
              >
            </li>
            <li>
              <a
                href="javascript:;"
                @click="hotClick"
                :class="{ active: isActive === 2 }"
                >热门点击</a
              >
            </li>
            <li>
              <a
                href="javascript:;"
                @click="mostInvolved"
                :class="{ active: isActive === 3 }"
                >最多参加</a
              >
            </li>
          </ul>
        </div>
        <ul class="clearfix row">
          <li
            class="col-md-3 col-sm-6 activity"
            v-for="item in this.userList"
            :key="item.id"
          >
            <div>
              <router-link :to="'/hotteamshow/' + item.id" class="bl">
                <img :src="$api + item.image" class="w100" alt="" />
              </router-link>
              <div class="content">
                <router-link
                  :to="'/hotteamshow/' + item.id"
                  class="bl name line1"
                  >{{ item.name }}</router-link
                >

                <div class="text line2" v-html="item.content"></div>
                <div class="address text">
                  <i class="iconfont icon-renyuan"></i>成员人数:{{
                    item.join_num
                  }}
                </div>
              </div>
            </div>
          </li>
        </ul>
        <div class="ta mt40">
          <el-pagination
            layout="  prev, pager, next "
            :page-size="page_size"
            @current-change="current_change"
            :current-page.sync="currentPage"
            :pager-count="5"
            :total="info.total"
            v-if="info.pages > 1"
          >
          </el-pagination>
          <el-empty description="暂无数据" v-if="info.total == 0"></el-empty>
        </div>
      </div>
    </div>
    <!-- 尾部 -->
    <v-foot />
  </div>
</template>

<script>
import vHead from "../../websitecom/Head.vue";
import vFoot from "../../websitecom/Foot.vue";
import vBan from "../../websitecom/Ban.vue";
import vErji from "../../websitecom/Erji.vue";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
  components: {
    vHead,
    vFoot,
    vBan,
    vErji,
    swiper,
    swiperSlide,
  },
  data() {
    return {
      isActive: 1,
      userList: [],
      erjiList: [],
      activeIndex2: "0",
      info: [], //数据
      page_size: 8, //每页多少数据
      currentPage: 1, //默认当前页为第一页
      sort: "id",
      type: "",
      keyword: "",
    };
  },
  beforeCreate: function () {
    document.getElementsByTagName("body")[0].className = "active";
    document.getElementsByTagName("html")[0].className = "active";
  },

  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    },
  },
  created() {
    this.gerErji();
  },
  mounted() {
    //设置滚动条指定
    document.documentElement.scrollTop = 0;
    this.getAllList(this.type);
    this.keyword = this.$route.query.keyword ? this.$route.query.keyword : "";
    //console.log("keyword", this.keyword);
  },
  methods: {
    handleSelect(key, keyPath) {
      this.currentPage = 1;
      //console.log(key, keyPath);
    },
    // 最新发布
    timeClick() {
      this.sort = "id";
      this.isActive = 1;
      this.currentPage = 1;
      this.getAllList(this.type);
    },
    // 热门点击
    hotClick() {
      this.sort = "views";
      this.isActive = 2;
      this.currentPage = 1;
      this.getAllList(this.type);
    },
    // 最多参加
    mostInvolved() {
      this.sort = "join_num";
      this.isActive = 3;
      this.currentPage = 1;
      this.getAllList(this.type);
    },

    gerErji() {
      var that = this;
      this.$axios
        .get(this.$api + "//api/team/select")
        .then(function (response) {
          if (response.data.code == 1) {
            response.data.data.unshift({ id: "", name: "全部类别" });
            that.erjiList = response.data.data;
          }
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    getAllList(type) {
      this.keyword = this.$route.query.keyword ? this.$route.query.keyword : "";
      //console.log(1222, this.keyword);
      //console.log(1223, type);
      var that = this;
      this.type = type;

      this.$axios
        .get(
          this.$api +
            "//api/team/index?page_no=" +
            this.currentPage +
            "&page_size=" +
            this.page_size +
            "&sort=" +
            this.sort +
            "&order=desc&search=name:" +
            this.keyword +
            ";type:" +
            that.type
        )
        .then(function (response) {
          that.userList = response.data.data.data;
          that.info = response.data.data.page;
          ////console.log('页数：'+that.currentPage, that.userList);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },

    current_change(currentPage) {
      //改变当前页
      this.currentPage = currentPage;
      this.getAllList(this.type);
    },
  },
};
</script>


<style>
html.active {
  overflow-y: scroll !important;
  height: auto !important;
}
.list_team ul .activity {
  margin-bottom: 2.125rem;
}
.activity .text.line2 {
  height: 3.75rem;
}
.shaixuan ul li a::before {
  background: #19a15f;
}
.activity > div a img {
  height: 12.5rem;
  object-fit: cover;
  object-position: center center;
}
.el-pager li.active,
.el-pager li:hover,
.el-pagination button:hover {
  background: #19a15f;
  color: #fff !important;
  border: 1px solid #19a15f !important;
}
.ny_erji ul li {
  float: left;
  margin-right: 0.625rem;
  position: relative;
  border-bottom: none !important;
}
.ny_erji ul li:hover {
  background: transparent !important;
  color: #19a15f;
}
.ny_erji ul li {
  padding: 0 1.125rem;
  position: relative;
  font-size: 1rem;
  display: block;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transform: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  color: #848484;
}

.ny_erji ul li::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background-color: #19a15f;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transform: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
}

.ny_erji ul li:hover::before,
.ny_erji ul li.is-active::before {
  width: 100%;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transform: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
}

.ny_erji ul li:hover,
.ny_erji ul li.is-active {
  color: #19a15f;
}
</style>


<style scoped>
@media (max-width: 1440px) {
  .el-menu--horizontal > .el-menu-item {
    line-height: 44px;
    height: 44px;
  }
}
@media (max-width: 1280px) {
  .ny_erji ul li {
    padding: 0 10px;
  }
}
@media (max-width: 767px)  {
.el-menu--horizontal > .el-menu-item {
    line-height: 40px;
    height: 40px;
  }
  .ny_erji ul li {
    width: 25%;
    padding: 0;
    text-align: center;
  }.list_team ul .activity {
    margin-bottom: 15px;
  }
}
</style>
